<template>
  <div class="container mt-2">
    <!-- 走马灯 -->
    <el-carousel trigger="click">
      <el-carousel-item v-for="item in carouselList" :key="item.id">
        <img :src="item.url" :alt="item.title" style="width: 100%;">
      </el-carousel-item>
    </el-carousel>
    <el-divider></el-divider>
    <el-form label-width="auto" :inline="true">
      <el-form-item>
        <el-input clearable v-model.trim="formData.keywords" placeholder="请输入搜索关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="formData.cate_id" placeholder="请选择分类" style="width: 120px">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="formData.status" placeholder="请选择问题状态" style="width:160px">
          <el-option :value="item.value" v-for="item in [{ value: false, label: '未解决' }, { value: true, label: '已解决' }]"
            :key="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table style="margin:20px 0;" :data="list" stripe>
      <el-table-column label="分类" prop="cate.name" min-width="60"></el-table-column>
      <el-table-column label="问题" prop="title" min-width="160"></el-table-column>
      <el-table-column label="状态" prop="status" min-width="80">
        <template #default="attr">
          <el-tag :type="attr.row.status ? 'success' : 'info'">{{ attr.row.status ? '已解答' : '未解答' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="作者" prop="user.username" min-width="100"></el-table-column>
      <el-table-column label="浏览次数" sortable prop="visit" min-width="100"></el-table-column>
      <el-table-column label="发布日期" sortable prop="create_time" min-width="100">
        <template #default="attr">
          {{ new Date(attr.row.create_time).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template #default="attr">
          <el-button @click="$router.push({ name: 'question', params: { id: attr.row.uuid } })" type="primary" plain
            round size="small" :icon="Right">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页按钮 -->
    <el-pagination v-if="list.length > 0" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" @size-change="sizeChange"
      @current-change="pageUpdate" background layout="total,prev, pager, next, sizes,jumper" :total="total" />
  </div>
</template>

<script setup>
import http from '@/utils/http'
import { Right } from '@element-plus/icons-vue'
import { getCategory } from '@/utils/api'
import { onMounted, ref } from 'vue'
// 表单数据
const formData = ref({ keywords: '', cate_id: '', status: '' })
const categoryList = ref([])
const carouselList = ref([])
const list = ref([])
const total = ref(0)
let pageNum = ref(1)
let pageSize = ref(10)
const queryData = async () => {
  const params = { page: pageNum.value, page_size: pageSize.value }
  if (formData.value.cate_id) {
    params.cate_id = formData.value.cate_id
  }
  if (formData.value.keywords) {
    params.keywords = formData.value.keywords
  }
  if (formData.value.status === true || formData.value.status === false) {
    params.status = formData.value.status
  }
  const { status, data } = await http.get('/api/questions/', { params })
  if (status == 200) {
    list.value = data.results
    total.value = data.count
  }

}
const pageUpdate = async (page) => {
  // 更新页码
  pageNum.value = page
  await queryData()
}
const sizeChange = async (size) => {
  pageSize.value = size
  await queryData()
}
// 搜索
const search = async () => {
  // 重置页码, 防止页码不存在
  pageNum.value = 1
  await queryData()
}

// 请求轮播图
const queryCarousel = async () => {
  const { status, data } = await http.get('/api/carousel/')
  if (status === 200) {
    carouselList.value = data
  }
}

onMounted(async () => {
  await queryData()
  await queryCarousel()
  // 请求分类列表数据
  const { status, data } = await getCategory()
  if (status == 200) {
    categoryList.value = data
  }
})
</script>
<style scoped></style>
